<template>
	<view class="record">
		<div class="header">
			<div class="header-left">研学纪实</div>
			<div class="header-right" @click="toComment">更多纪实>></div>
		</div>
		<view class="list" v-if="!showLoading">
			<u-scroll-list :indicator="false" v-if="commentList.length>0">
				<view class="list-item" v-for="(item, index) in commentList" :key="index" @click="toCommentDetail(item.id)">
					<view class="list-item-image">
						<u--image width="100%" height="420rpx" radius="20rpx 20rpx 0 0" :src="item.firstMedia" mode="aspectFill"></u--image>
						<!-- <view class="play">
							<uv-icon name="play-right-fill" size="16" color="#fff"></uv-icon>
						</view> -->
						<view class="star">
							<uv-rate :count="count" v-model="value"></uv-rate>
						</view>
					</view>
					<view class="list-item-info">
						<view class="list-item-info-title twoline">{{item.content}}</view>
						<view class="list-item-info-button" v-if="item.eventId && item.eventId !== eventId">
							<view class="sign-up" @click.stop="toEventDetail(item.eventId)">报名该活动</view>
							<view class="more">更多</view>
						</view>
					</view>
				</view>
			</u-scroll-list>
			<view style="padding: 40rpx 0;" v-else>
				<u-empty mode="search" :iconSize="90" text="数据为空"></u-empty>
			</view>
		</view>
		<view class="skeleton" style="margin-right: 40rpx;" v-else>
			<u-row :gutter="30">
				<u-col span="6" v-for="item in 2" :key="index">
					<u-skeleton avatar avatarSize="172" avatarShape="square" :loading="showLoading"></u-skeleton>
					<view style="margin-top: 20rpx;">
						<u-skeleton rows="0" titleWidth="80%" title :loading="showLoading"></u-skeleton>
					</view>
				</u-col>
			</u-row>
		</view>
		<LoginModal ref="loginModal" />
	</view>
</template>

<script>
	import {
		checkLogin
	} from '@/utils/index.js';

	export default {
		props: {
			commentList: {
				type: Array,
				default: [],
			},
			eventId: {
				type: String,
				default: '',
			},
			showLoading: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {

			}
		},
		methods: {
			toComment() {
				uni.navigateTo({
					url: `/pages/study/comment`
				});
			},
			toEventDetail(id) {
				if(checkLogin()) {
					uni.navigateTo({
						url: `/pages/study/event-detail?id=${id}`,
					});
				} else {
					this.$refs.loginModal.open();
				}
			},
			toCommentDetail(id) {
				if(checkLogin()) {
					uni.navigateTo({
						url: `/pages/study/comment-detail?id=${id}`,
					});
				} else {
					this.$refs.loginModal.open();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.record {
		margin-top: 32rpx;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-direction: row;
			margin-bottom: 20rpx;

			&-left {
				font-size: 32rpx;
				color: #74BB2A;
			}

			&-right {
				// text-decoration-line: underline;
				// text-decoration-style: solid;
				color: #D7A768;
			}
		}

		.list {
			margin-left: -20rpx;
		}

		.list-item {
			flex-shrink: 0;
			width: 360rpx;
			margin-left: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;

			&-image {
				position: relative;
				width: 100%;
				border-radius: 24rpx 24rpx 0 0;

				.play {
					position: absolute;
					top: 32rpx;
					right: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 32px;
					height: 32px;
					border-radius: 64rpx;
					background: #00000099;
				}

				.star {
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					height: 70rpx;
				}
			}

			&-info {
				padding: 24rpx 16rpx 24rpx 20rpx;
				background-color: #fff;

				&-title {
					padding: auto;
					font-size: 32rpx;
					color: #203F3F;
				}

				&-button {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin-top: 20rpx;

					.sign-up {
						font-size: 28rpx;
						color: #74BB2A;
					}

					.more {
						font-size: 28rpx;
						color: #74BB2A;
					}
				}
			}
		}
	}
</style>